<template>
  <view class="house-card">
    <image class="thumb" :src="data.thumbnail" mode="aspectFill" />
    <view class="info">
      <text class="title">{{ data.title }}</text>
      <view class="meta">
        <text class="price">¥{{ data.price }}/月</text>
        <text class="area">{{ data.area }}㎡</text>
      </view>
      <view class="tags">
        <text class="tag" v-for="tag in data.tags" :key="tag">{{ tag }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import type { PropType } from 'vue'
import type { IHouseItem } from '@/types/house'

export default defineComponent({
  props: {
    data: {
      type: Object as PropType<IHouseItem>,
      required: true
    }
  }
})
</script>

<style lang="scss" scoped>
.house-card {
  padding: 20rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  display: flex;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(0);
  box-shadow: $uni-box-shadow;
  background: $uni-bg-color;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
  }
}

.thumb {
  width: 240rpx;
  height: 180rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.meta {
  margin: 16rpx 0;
  display: flex;
  align-items: center;
}

.price {
  color: #f40;
  font-size: 36rpx;
  font-weight: bold;
  margin-right: 20rpx;
}

.area {
  color: #666;
  font-size: 28rpx;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.tag {
  background: #f5f5f5;
  color: #666;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 8rpx;
}
</style>